<template>
	<view class="enterBox u-flex" :style="{containerStyle}">

		<view class="input-wrap">
			<u-input v-model="value" :clearable="false" placeholder="留下你的精彩评论吧" maxlength="200" :focus="focus" @change="change"></u-input>
		</view>
		<u-image :src="imgStaticUrl+'/images/icon-arrowUp.png'" width="30px" height="30px" @click="submit" class="submit">
		</u-image>
	</view>
</template>

<script>
	export default {
		name: 'enterComment',
		data() {
			return {
				imgStaticUrl: '',
				value: '',
				containerStyle: {},
				focus: false
			}
		},
		mounted() {
			this.imgStaticUrl = this.STATICURL;  // 线上图片地址（兼容微信小程序写法）	
		},
		methods: {
			change(e) {
				console.log(e)
			},
			submit() {
				const {
					value
				} = this
				
				if(!value) {
				  return uni.showToast({
				    title: '请输入评论内容',
					icon: 'none'
				  });
				}
				this.$emit('submit', value)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.enterBox {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		width: 100%;
		position: fixed;
		bottom: 0;
		border-top: 1px solid #ececec;
		background-color: #fff;
		padding: 10rpx 0;
		z-index: 10075;

		.input-wrap {
			width: 650rpx;
			padding-left: 20rpx;
		}

		/deep/ .u-input {
			border-radius: 200px;
			padding-left: 20rpx !important;
			background-color: $u-bg-color;
		}

		.submit {
			width: 50rpx;
			margin-left: 20rpx;
		}
	}
	
</style>
